<!--
 @description 首页
 @fileName index.vue
 @author zengqiongying
 @created 2023/04/13 13:16:46
-->
<template>
  <div>
    <div class="banner">
      <img src="@/assets/images/home.png" />
    </div>
    <div class="home-menu-list">
      <div v-for="(l, k) in buttonList" :key="k" class="item" @click="goToPage(l.routeName)">
        <img class="icon" :src="require(`@/assets/images/home/${l.buttonCode}.png`)" />
        <div>{{ l.name }}</div>
      </div>
    </div>

    <qmp-sticky :z-index="2">
      <div class="g-tile">待办任务</div>
    </qmp-sticky>
    <div class="g-content">
      <TaskList pageSource="todoList" status="1" />
    </div>
  </div>
</template>
<script lang="ts">
  import { useRouter } from 'vue-router'
  import { reactive, toRefs } from 'vue'
  import { queryBtnList } from '@/apis/dataDict'
  import TaskList from '../components/Task/List.vue'
  import { IAnyKeyObject } from '@/types/common'
  export default {
    name: 'Index',
    components: { TaskList },
    setup() {
      const $router = useRouter()
      const datas = reactive<IAnyKeyObject>({
        buttonList: []
      })
      const moduleData = [
        { buttonCode: 'soft', name: '软装验/复', routeName: 'SoftCheckAccept' },
        { buttonCode: 'hard', name: '硬装验/复', routeName: 'HardCheckAccept' },
        { buttonCode: 'task', name: '任务管理', routeName: 'TaskManagement' }
      ]
      const goToPage = (name: string) => {
        if (name) {
          $router.push({ name })
        }
      }
      // 获取按钮权限
      const getBtnList = async (code: string) => {
        /* if (process.env.QMP_EVN === 'development') {
          datas.buttonList = moduleData
          return
        } */
        const res: any = await queryBtnList(code)
        const { success, data = [] } = res
        if (success === 1) {
          let activeCodes = data.map((i: any) => i.buttonCode)

          const list: any = moduleData.filter((v: any) => activeCodes.includes(v.buttonCode))
          datas.buttonList = list
        }
      }

      getBtnList('sas')

      return {
        ...toRefs(datas),
        goToPage
      }
    }
  }
</script>
<style lang="less" scoped>
  .banner {
    max-height: 254px;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
    }
  }
  .home-menu-list {
    position: relative;
    z-index: 1;
    margin-top: -58px;
    padding: 12px 0;
    min-height: 76px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: rgba(242, 244, 243, 0.8);
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: -12px;
      transform: translateX(-50%);
      display: inline-block;
      width: 0px;
      height: 0px;
      border: 6px solid rgba(242, 244, 243, 0.8);
      border-top-color: transparent;
      border-bottom-color: rgba(242, 244, 243, 0.8);
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .item {
      width: 20%;
      height: 52px;
      text-align: center;
      .icon {
        width: 32px;
        height: 32px;
      }
      .name {
        margin-top: 4px;
        font: var(--font-point);
        color: var(--texticon-default-strong);
      }
    }
  }
  .g-tile {
    padding: 12px 14px;
    margin-bottom: 6px;
    font: var(--font-main-title-strengthen);
    color: var(--texticon-default-strong);
  }
  /deep/ .qmp-sticky--fixed {
    .g-tile {
      background: #f2f4f3;
    }
  }
</style>
